<template>
    <div class="forward-mail">
        <div class="forward-mail-title">
            <span @click="linkTo">转发邮件</span>
        </div>
        
         <div v-loading="loading.status" :element-loading-text="loading.txt">
            <div class="forward-mail-main">
                <el-form :model="sendForm" :rules="rules" ref="sendForm" label-width="100px" class="demo-send-form">
                    <el-form-item label="收件人" prop="recipients" class="send-form-recipients">
                        <div v-if="recipientList.length > 0" @click="addFormRecipient">
                            <span v-for="(item, index) in recipientList" :key="index">
                                {{item.name}}<i class="el-icon-error" @click.stop="clearReceiver(index)"></i><span>；</span>
                            </span>
                        </div>
                        <div v-else @click="addFormRecipient">选择收件人</div>
                        <div class="send-form-reciver">
                            <span @click="show_recipic = !show_recipic">{{show_recipic ? '隐藏外部收件人' : '添加外部收件人'}}</span>
                            <span @click="show_cc = !show_cc">{{show_cc ? '隐藏抄送' : '显示抄送'}}</span>
                        </div>
                        <div class="send-form-btn">
                            <span @click="addFormRecipient">添加收件人</span>
                            <span @click="clearRecipient">清空</span>
                        </div>
                        <el-input v-model="sendForm.recipients" v-show="false"></el-input>
                    </el-form-item>

                    <el-form-item label="抄送" v-show="show_cc">
                        <div v-if="ccList.length > 0" class="send-form-cc" @click="addFormRecipient('cc')">
                            <span v-for="(item, index) in ccList" :key="index">
                                {{item.name}}<i class="el-icon-error" @click.stop="clearCC(index)"></i><span>；</span>
                            </span>
                        </div>
                        <div v-else class="send-form-cc" @click="addFormRecipient('cc')">选择收件人</div>
                        <div class="send-form-btn">
                            <span @click="addFormRecipient('cc')">添加收件人</span>
                            <span @click="clearRecipient('cc')">清空</span>
                        </div>
                    </el-form-item>

                    <el-form-item label="外部收件人" v-show="show_recipic">
                        <el-input 
                            id="external_recipient" 
                            v-model="sendForm.externalRecipient" 
                            @blur="blurExternalRecipient" 
                            placeholder="输入正确的邮箱格式，用中文或英文 , 隔开">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="Internet邮箱" v-show="show_recipic" class="send-form-internet">
                        <el-select v-if="internetList.length > 0" v-model="sendForm.internetMail" placeholder="请选择邮箱">
                            <el-option v-for="(item, index) in internetList" :key="index" :label="item.account" :value="item.id"></el-option>
                        </el-select>
                        <el-select v-else v-model="sendForm.internetMail" placeholder="请至邮箱设置中设置Internet邮箱">
                            <el-option v-for="(item, index) in internetList" :key="index" :label="item.account" :value="item.id"></el-option>
                        </el-select>
                        <span>通过该邮箱发邮件给外部收件人</span>
                    </el-form-item>

                    <el-form-item label="邮件主题" prop="subject">
                        <el-input v-model="sendForm.subject" maxlength="40" placeholder="40个字符以内"></el-input>
                    </el-form-item>
                    <el-form-item label="邮件内容" prop="post_content" class="mail-content">
                        <tinymce
                            id="d1"
                            ref="tm"
                            :plugins="plugins"
                            :other_options="tinymceOptions"
                            :toolbar1="toolbar1"
                            :toolbar2="toolbar2"
                            @editorInit="editorInit"
                            v-model="sendForm.post_content">
                        </tinymce>
                        <div class="tinymce-num">{{tinymceNum}} / 10000</div>
                    </el-form-item>

                    <el-form-item label="附件">
                        <span v-if="sendForm.attachment.length === 0" class="no-attachment">无附件</span>
                        <div v-else class="send-form-attachment-list">
                            <span v-for="(item, index) in sendForm.attachment" :key="index">
                                <img src="./../../../assets/email/images/attachment.png" />
                                <span>{{item.name}}</span>
                                <i class="el-icon-error" @click="delAttachment(item.name)"></i>
                            </span>
                        </div>
                    </el-form-item>
                    <el-form-item label="附件">
                        <uploader
                            class="uploader-example"
                            ref="uploader"
                            :options="uploadOptions"
                            :file-status-text="statusText"
                            @file-added="fileAdded"
                            @files-submitted="fileSubmit"
                            @file-progress="fileProgress"
                            @file-removed="fileRemoved"
                            @file-success="fileSuccess"
                            @file-error="fileFail">
                            <uploader-unsupport></uploader-unsupport>
                            <uploader-btn :directory="false" :single="true" v-if="sendForm.attachment.length < 3 && !disabledUplader">上传附件</uploader-btn>
                            <el-button v-else class="disabled-uploader" disabled>上传附件</el-button>
                            <div :class="progressing ? 'uploader-progress-active' : 'uploader-progress'">
                                <div>
                                    <el-progress :percentage="percentage" color="#33BBBB"></el-progress>
                                    <span @click="fileCancel">取消</span>
                                </div>
                            </div>
                        </uploader>
                    </el-form-item>
                </el-form>
            </div>

            <div class="forward-mail-footer">
                <span @click="submitDrafts"><img src="./../../../assets/email/images/save.png" />保存至草稿箱</span>
                <span @click="submitMail('sendForm')"><img src="./../../../assets/email/images/mail.png" />发送邮件</span>
            </div>
        </div>

        <el-dialog 
            title="选择人员" 
            :visible.sync="pop_up" 
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            :before-close="closeRecipient"
            class="common-mail-dialog add-recipients-dialog" 
            width="850px">
            <div class="el-dialog-pop-up">
                <div>
                    <div>
                        <el-select v-model="plaformId" placeholder="请选择" @change="getReceiverData('search')" filterable>
                            <el-option
                                v-for="(item, index) in plaformList"
                                :key="index"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="org-people-box">
                        <div id="scrollReceiver">
                            <template v-if="receiverList.length > 0">
                                <div class="org-people-item" v-for="(item, index) in receiverList" :key="index">
                                    <span>{{index+1}}.{{item.name}}</span>
                                    <span v-html="showRoleName(item.role_name)"></span>
                                    <span @click="addRecipient(index)">添加</span>
                                </div>
                            </template>
                            <template v-else>
                                <span class="no-more-data">无数据</span>
                            </template>
                        </div>
                        <p @click="addAllRecipient">全部添加</p>
                    </div>
                </div>
                <div>
                    <div class="el-dialog-pop-keyword">
                        <el-input v-model="receiver_keyword" placeholder="用户姓名"></el-input>
                        <el-button type="primary" @click="getReceiverData('search')">搜索</el-button>
                    </div>
                    <div class="el-show-pepole">
                        <div>
                            <div>
                                <span></span>
                                <span>账号</span>
                                <span>用户名</span>
                                <span>角色</span>
                                <span>所属组织</span>
                            </div>
                            <template v-if="people_lsit.length > 0">
                                <div v-for="(item, index) in people_lsit" :key="index">
                                    <span @click="deleteRecipient(index)">
                                        <i class="el-icon-error"></i>
                                    </span>
                                    <span>{{item.number}}</span>
                                    <span>{{item.name}}</span>
                                    <span v-html="showRoleName(item.role_name)"></span>
                                    <span>{{item.platform_name}}</span>
                                </div>
                            </template>
                        </div>
                        <p @click="people_lsit = []">全部移除</p>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="info" size="small" plain @click="closeRecipient">取 消</el-button>
                <el-button type="primary" size="small" @click="newRecipient">确 定</el-button>
            </span>
        </el-dialog>

        <transition name="el-fade-in-linear">
			<div class="video-preview" :class="{activeLive: isActive}">
				<div class="maskingBox"
					v-loading="viewLoading.status"
					:element-loading-text="viewLoading.txt">
					<div class="masking_h">
						<span>视频预览</span>
						<i class="el-icon-close" @click="closeVideoView"></i>
					</div>
					<div class="masking_c">
						<nativeVideo v-if="showVideoPlayer" :playParam.sync="playParam"></nativeVideo>
					</div>
				</div>
			</div>
		</transition>

        <transition name="el-fade-in-linear" lock-scroll="false">
			<div class="document-preview" :class="{activeLive: isPDFActive}">
				<div class="maskingBox">
					<div class="masking_h">
						<span>文档预览</span>
						<i class="el-icon-close" @click="closePdfView"></i>
					</div>

					<div class="masking_c">
                    <div>
                        <div class="pdf-view">
                            <div 
                                v-if="viwPdfParam.loadedRatio > 0 && viwPdfParam.loadedRatio < 1" 
                                style="background-color: green; color: white; text-align: center" 
                                :style="{ width: viwPdfParam.loadedRatio * 100 + '%' }">
                                {{ Math.floor(viwPdfParam.loadedRatio * 100) }}%
                            </div>
                            <pdf ref="pdf" 
                                :src="viwPdfParam.src" 
                                :page="viwPdfParam.page"   
                                @progress="viwPdfParam.loadedRatio = $event" 
                                @error="pdfError" 
                                @num-pages="viwPdfParam.numPages = $event" 
                                @link-clicked="viwPdfParam.page = $event">
                            </pdf>
                        </div>

                        <el-pagination
                            @current-change="pdfPageChange"
                            :current-page="viwPdfParam.page"
                            :page-size="1"
                            layout="total,  prev, pager, next, jumper"
                            :total="viwPdfParam.numPages">
                        </el-pagination>
                    </div>
				</div>
				</div>
			</div>
		</transition>

        <el-dialog
            title="图片预览"
            class="picture-preview"
            :visible.sync="imgVisible"
            :close-on-click-modal="false">
            <div>
                <img :src="imgViewUrl">
            </div>
        </el-dialog>

        <el-dialog
			title="音频预览"
            class="audio-preview"
			:visible.sync="voiceVisible"
            :before-close="closeAudio"
			:close-on-click-modal="false">
			<div>
				<audio id="voicepoauy" controls="controls" :src="voiceViewUrl" controlsList="nodownload">
				    Your browser does not support the audio tag.
				</audio>
			</div>
		</el-dialog>

        <div id="forward_tinymce_content"></div>
    </div>
</template>

<script>
    import pdf from 'vue-pdf';
    import axios from '../../../tools/axios';
    import tinymce from "vue-tinymce-editor";
    import {networkMailbox} from './../base/base.js';
    import nativeVideo from './../../common/nativeVideo';
    import CHINESE from '../../../assets/tinymce_languages/zh_CN.js';
    import AttachmentImg from './../../../assets/email/images/attachment.png';

    export default {
        data() {
            return {
                receiverCount: 0,
                isScroll: true,
                scrollT: 0,
                show_cc: false, // 显示抄送收件人
                pop_up: false, // 弹出收件人窗口
                show_recipic: false, // 显示外部收件人
                progressing: false, // 是否正在上传附件
                disabledUplader: false, // 上传附件过程中，不可以在上传
                home_header: null, // html dom
                home_main: null, // html dom
                plaformId: null, // 收件人的组织架构
                mailId: null, // 第一次手动保存后返回的邮件 id
                editLoad: 0, // 编辑器未初始化前，watch 不能做操作
                percentage: 0, // 附件上传进度
                tinymceNum: 0, // 邮件长度限制
                uploadRetryTimes: 10, // 上传附件失败重新上传次数
                receiver_keyword: '', // 收件人搜索关键字
                boxName: 'inbox', // 从那个模块跳转，默认inbox
                toolbar1: "paste,fullscreen,link,image", // 编辑器工具栏
                toolbar2: 'table |insertfile undo redo | formatselect  | fontsizeselect | forecolor backcolor | fontselect bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | removeformat', // 编辑器工具栏
                internetList: [], // 网络邮箱
                plaformList: [], // 组织架构
                people_lsit: [], // 选中的收件人
                ccList: [], // 选中的抄送人列表
                recipientList: [], // 选中的收件人列表
                receiverList: [], // 组织架构下的用户
                plugins: ["paste", "fullscreen", "link", "image"], // 编辑器插件
                loading:{
					status:false,
					txt:'加载数据......',
				},
                receiverParam: { // 收件人列表参数
                    page_index: 1,
                    page_size: 10
                },
                sendForm: { // 邮件表单
                    recipients: '',
                    cc: '',
                    externalRecipient: '',
                    internetMail: null,
                    subject: '',
                    post_content: '',
                    attachment: []
                },
                uploadOptions: { // 上传参数
                    target: this.BASE_URL + "/api/resource/res_upload",
                    testChunks: false,
                    headers: {Authorization: `Bearer ` + this.$g.access_token}
                },
                statusText: { // 上传状态
                    success: "上传成功",
                    error: "上传出错",
                    uploading: "正在上传...",
                    paused: "暂停",
                    waiting: "等待上传"
                },
                tinymceOptions: { // 编辑器参数
                    // images_upload_handler: this.images_upload_handler,
                    language_url: CHINESE,
                    // images_upload_url: this.BASE_URL + "/api/resource/res_upload_permanent",
                    paste_data_images: false, // 粘贴的同时能把内容里的图片自动上传，非常强力的功能
                    paste_convert_word_fake_lists: false, // 插入word文档需要该属性
                    paste_webkit_styles: "all",
                    paste_merge_formats: true,
                    nonbreaking_force_tab: false,
                    paste_auto_cleanup_on_paste: true, // 去掉文本里的样式
                    paste_preprocess: (plugin, args) => {
                        args.content = this.strip_tags(args.content);
                    },
                    font_formats: `
                        微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;
                        宋体='宋体',Helvetica,Arial,sans-serif;
						仿宋='仿宋',Helvetica,Arial,sans-serif;
                        楷体='楷体',Helvetica,Arial,sans-serif;
                        黑体='黑体',Helvetica,Arial,sans-serif;
                        幼圆='幼圆',Helvetica,Arial,sans-serif;
                        隶书='隶书',Helvetica,Arial,sans-serif;
                        华文新魏='华文新魏',Helvetica,Arial,sans-serif;
                        苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;
                        Arial='Arial',Helvetica,Arial,sans-serif;
                        Verdana=verdana,geneva;
                        Webdings=webdings
                    `,
                },
                rules: { // 表单规则验证
                    recipients: [
                        { required: true, message: '请输入收件人', trigger: 'change' }
                    ],
                    subject: [
                        { required: true, message: '请输入邮件主题', trigger: 'blur' }
                    ],
                    post_content: [
                        { required: true, message: '请输入邮件正文内容', trigger: 'blur' }
                    ]
                },
                itemDetail: {}, // 邮件详细信息
                viewLoading:{
                    status: false,
                    txt: '加载数据...'
                },
                viwPdfParam: {
                    src: '',
                    loadedRatio: 0,
                    page: 1,
                    numPages: 0,
                    rotate: 0
                },
                imgViewUrl: '',
                voiceViewUrl: '',
                playParam: {play_url: ''},
                showVideoPlayer: false,
                isActive: true,
                isPDFActive: true,
                imgVisible: false,
                voiceVisible: false,
            }
        },
        created() {
            // iframe 调用父级 vue 函数， 把函数挂载在 window 对象
            window['previewScorce'] = (obj) => {
                this.previewScorce(obj);
            };

            this.getInternetList();
        },
        mounted() {
            this.boxName = this.$route.query.name ? this.$route.query.name : 'inbox';
            this.setStyle();
            this.getPlaformList();
        },
        beforeDestroy() {
            document.removeEventListener('scroll', this.scrollFun, false);
        },
        watch: {
            'sendForm.externalRecipient'(newVal, oldVal) {
                let str = newVal.split(/[,，]/g);

                if (str.length === 21) {
                    this.sendForm.externalRecipient = oldVal;
                    this.$message.warning('外部收件人最多可添加20个账号');
                }
            },
            'sendForm.post_content'(newVal, oldVal) {
                if (this.editLoad === 0) {
                    this.editLoad++;
                } else {
                    setTimeout(() => {
                        let body = document.getElementById('d1_ifr').contentWindow.document.getElementsByTagName('body')[0].textContent;
                        let newLen = body.replace(/\s/g, '').length;
                        let oldLen = this.tinymceNum;

                        // 判断邮件长度是否超过 10000
                        if (newLen > 10000) {
                            this.$message.warning('邮件最大长度不可以超过 10000 个字');
                            this.tinymceNum = oldLen;
                            this.sendForm.post_content = oldVal;
                        } else {
                            this.tinymceNum = newLen;
                        }
                    }, 300);
                }
            }
        },
        components: {
            pdf,
            tinymce,
            nativeVideo
        },
        methods: {
            strip_tags (str){
                //对img标签进行匹配
                let imgReg = /<img.*?(?:>|\/>)/gi;
                
                if(imgReg.test(str)) {
                    //将img标签替换为*
                    str =  str.replace(imgReg, "");
                }
                
                //处理html标签
                // mainContent =  mainContent.replace(/&nbsp;/gi," ");
                return str;
            },
            /**
             * 获取网络邮箱
             */
            getInternetList() {
                networkMailbox(this).then(res => {
                    this.internetList = res;
                })
            },
            /**
             * 获取邮件数据
             */
            getMail() {
                let success = (res => {
                    this.itemDetail = deep_clone(res.data);
                    let exteranaName = '';
                    this.ccList = [];
                    this.recipientList = [];

                    this.itemDetail.user.filter(val => val.receive_type == 3).forEach(val1 => {
                        exteranaName += val1.name + ';';
                    })

                    this.sendForm.subject = this.itemDetail.subject;
                    this.sendForm.recipients = 'receiver';
                    this.sendForm.internetMail = undefined;
                    // this.sendForm.internetMail = this.itemDetail.config_id == 0 ? null : this.itemDetail.config_id;
                    // this.sendForm.externalRecipient = exteranaName;
                    this.sendForm.externalRecipient = '';

                    // this.setReceiverCcInfo('info');
                    this.setEditorContent();

                    this.$nextTick(() => {
                        let self = this;
                        let source = document.getElementById('d1_ifr').contentWindow.document.getElementById('tinymce').querySelectorAll('.download-source');
                        let previewS = document.getElementById('d1_ifr').contentWindow.document.getElementById('tinymce').querySelectorAll('.click-span-preview');
                        
                        source.forEach(item => {
                            item.addEventListener('click', function(ev) {
                                window.location.href = ev.currentTarget.dataset.link;
                            }, false)
                        })
                        previewS.forEach(item => {
                            item.addEventListener('click', function(ev) {
                                self.previewFile({id: +ev.currentTarget.dataset.id, file_type: +ev.currentTarget.dataset.type});
                            }, false)
                        })
                    })
                });

                this.$ajax({
                    url: "api/email/single",
                    method: "get",
                    params: {id: this.$route.query.id},
                    func: {success: success}
                });
            },
            /**
             * 预览附件
             * @param {Object} obj 附件信息
             * 文件类型（1：文档；2：日志；3：图片；4：压缩文件；5：音频文件；6：视频；7：应用程序；8：其他）
             */
            previewFile(obj) {
                this.viewLoading.status = true;

                switch(parseInt(obj.file_type)) {
                    case 1:
                        this.isPDFActive = false;
                        break;
                    case 3:
                        this.imgVisible  = true;
                        break;
                    case 5:
                        this.voiceVisible = true;
                        break;
                    case 6:
                        this.isActive = false;
                        break;
                    default: 
                        this.$message.warning("不支持预览的资源类型");
                        return false;
                }

                let success = ( res => {
                    let result  = res.data;

                    switch(parseInt(obj.file_type)) {
                        case 1:
                            this.pdfView( result.path);
                            break;
                        case 3:
                            this.imgView(result.path);
                            break;
                        case 5:
                            this.voiceView(result.path);
                            break;
                        case 6:
                            this.videoView(result.path);
                            break;
                        default: 
                            this.$message.warning("不支持预览的资源类型");
                    }
                })
                let fail = (res => {
                    this.viewLoading.status = false;
                    this.$message.error(res.msg);
                })
                
                this.$ajax({
                    url: "api/resource/view_info",
                    method: "get",
                    params: {
                        id: obj.id, 
                        is_email_file: 1
                    },
                    func: {
                        success: success,
                        fail: fail
                    }
                });
            },
            /**
             * 关闭音频播放
             */
            closeAudio() {
                this.voiceVisible = false;
                document.getElementById("voicepoauy").pause();
            },
            /**
             * 音频预览
             */
            voiceView(url) {
                this.voiceViewUrl = url;
                document.getElementById("voicepoauy").load();	
            },
            /**
             * 图片预览
             */
            imgView(url) {
                this.imgViewUrl = url;
            },
            /**
             * 文档预览
             */
            pdfView(url) {
                this.viwPdfParam.src = pdf.createLoadingTask(url);
            },
            /**
             * 改变文档页数
             */
            pdfPageChange(val) {
                this.viwPdfParam.page  = val;
            },
            /**
             * 文档预览失败
             */
            pdfError: function(err) {
                this.$message.error('读取文件失败');
            },
            /**
             * 关闭文档预览
             */
            closePdfView() {
                this.isPDFActive = true;
            },
            /**
             * 关闭视频预览
             */
            closeVideoView() {
                this.showVideoPlayer = false;
                this.isActive = true;
            },
            /**
             * 视频预览
             */
            videoView(url) {
                this.showVideoPlayer = true;
                this.playParam.play_url = url;
            },
            /**
             * 获取收件人和抄送人信息
             */
            setReceiverCcInfo(flag) {
                let ccTemp = is_empty(this.itemDetail.user) ? [] : this.itemDetail.user.filter(val => val.receive_type == 2);

                if (flag === 'info' && is_empty(this.receiverList)) {
                    // this.recipientList.push({
                    //     id: this.itemDetail.create_id,
                    //     name: this.itemDetail.user_name
                    // })

                    // ccTemp.forEach(val2 => {
                    //     this.ccList.push({
                    //         id: +val2.receiver,
                    //         name: val2.name
                    //     })
                    // })
                } else {
                    this.ccList = [];
                    this.recipientList = [];

                    this.receiverList.forEach(item10 => {
                        if (item10.id === this.itemDetail.create_id) {
                            this.recipientList.push({
                                id: item10.id,
                                number: item10.number,
                                name: item10.name,
                                platform_name: item10.platform_name,
                                role_name: item10.role_name
                            })
                        }
                    })
                    
                    ccTemp.forEach(val2 => {
                        this.receiverList.forEach(item10 => {
                            if (item10.id === +val2.receiver) {
                                this.ccList.push({
                                    id: item10.id,
                                    number: item10.number,
                                    name: item10.name,
                                    platform_name: item10.platform_name,
                                    role_name: item10.role_name
                                })
                            }
                        })
                    })
                }
            },
            /**
             * 获取收件人名称
             * @param {Object} obj 收件人列表
             * @param {Number} type 1-发件人 | 2-抄送人 | 3-外部收件人
             */
            getUserName(obj, type) {
                if (is_empty(obj)) {
                    return '';
                } else {
                    let text = '';

                    obj.filter(item => item.receive_type == type).forEach((item, index) => {
                        text += (index != 0 ? '，' : '') + item.name;
                    })

                    if (text === '') {
                        text = '无';
                    }

                    return text;
                }
            },
            /**
             * 编辑器添加邮件内容
             */
            setEditorContent() {
                let body = document.getElementById('d1_ifr').contentWindow.document.getElementsByTagName('body');
                // let content = `<br /><br /><br /><br /><br /><br /><br /><br /><br />`;
                let content = `<p></p><p></p><p></p><p></p><p></p><p></p>`;
                let imgBox = '';

                for (let j=0; j<this.itemDetail.file.length; j++) {
                    let item = this.itemDetail.file[j];
                    imgBox += `
                        <span style="display:flex;justify-content: flex-start;align-items: center;margin-right: 30px;font-size: 14px;color:#586F8B;">
                            <img style="margin-right: 5px;" src="${AttachmentImg}" />
                            <span class="click-span-preview" data-id="${item.id}" data-type="${item.file_type}" data-key="${j}" style="cursor: pointer;">${item.name}.${item.postfix}</span>
                        </span>
                    `;
                }

                let domBox = `
                    <div>
                        <p style="font-size: 14px>---------- 原始邮件 ----------</p>
                        <div style="margin-top: 10px;padding: 10px 30px 15px;line-height: 23px;background: #F9F9F9;">
                            <div style="font-size: 12px;">
                                <div>
                                    <span>主题：</span><span>${this.itemDetail.subject}</span>
                                </div>
                                <div>
                                    <span>发件人：</span><span>${this.itemDetail.user_name}</span>
                                </div>
                                <div>
                                    <span>收件人：</span><span>${this.getUserName(this.itemDetail.user, 1)}</span>
                                </div>
                                <div>
                                    <span>抄送人：</span><span>${this.getUserName(this.itemDetail.user, 2)}</span>
                                </div>
                                <div>
                                    <span>时间：</span><span>${this.itemDetail.create_time}</span>
                                </div>
                                <div style="display: flex;">
                                    <span style="width: 40px;">附件：</span>
                                    ${is_empty(imgBox) ? '无' : `<div style="display: flex;flex-wrap: wrap;flex: 1;">${imgBox}</div>`}
                                </div>
                            </div>
                        </div>
                        <div style="padding: 40px 0;font-size: 14px;color: #333333;line-height: normal;">${this.itemDetail.content}</div>
                    </div>
                `;

                content = content + domBox;
                this.sendForm.post_content = content;
                body.innerHTML = content;

                this.$nextTick(() => {
                    let spanList = document.getElementById('d1_ifr').contentDocument.querySelectorAll('.click-span-preview');

                    spanList.forEach(item => {
                        item.addEventListener('click', function(ev) {
                            let id = ev.currentTarget.dataset.id;
                            let type = ev.currentTarget.dataset.type;
                            if (id && type) {
                                window.parent.previewScorce({id, type})
                            }
                        }, false)
                    })
                });
            },
            /**
             * 编辑器初始化
             */
            editorInit() {
                // 第一次加载编辑器的时候，会有延迟，数据先执行，则编辑器没有内容
                this.getMail();

                // 修改输入框内文字与边界的宽
                let htmlDom = document.getElementById('d1_ifr').contentWindow.document.getElementById('tinymce');
                htmlDom.style.margin = "8px 25px  80px";
            },
            /**
             * 获取平台列表
             */
            getPlaformList() {
                let success = (res => {
                    this.plaformList = res.data;

                    if (this.plaformList.length > 0) {
                        this.plaformId = this.plaformList[0].id;
                        this.receiver_keyword = null;
                        this.receiverParam = {
                            page_index: 1,
                            page_size: 10
                        }
                        this.getReceiverList('search');
                    }
                });

                this.$ajax({
                    url: "api/email/platform",
                    method: "get",
                    params: {},
                    func: {success: success}
                });
            },
            /**
             * 
             */
            scrollFun(event) {
                event = event || window.event;
                let target = event.target;
                let scrollH = target.scrollHeight - target.scrollTop - target.clientHeight;
                
                if (
                    this.scrollT < target.scrollTop
                    && scrollH < 20 
                    && this.isScroll 
                    && Math.ceil(this.receiverCount/this.receiverParam.page_size) > this.receiverParam.page_index) {
                    this.isScroll = false;
                    this.receiverParam.page_index++;
                    this.getReceiverData('scroll');
                }

                this.scrollT = target.scrollTop
            },
            getReceiverData(flag) {
                if (flag === 'search') {
                    this.receiverParam = {
                        page_index: 1,
                        page_size: 10
                    }
                }

                let success = (res => {
                    this.isScroll = true;
                    this.receiverCount = res.data.data_sum;

                    // 不能给自己发邮件，过滤当前用户
                    let user_id = JSON.parse(sessionStorage.getItem('user_info_str')).id;
                    res.data.data = res.data.data.filter(item => user_id !== item.id);

                    if (flag === 'scroll') {
                         res.data.data.forEach(item => {
                              this.receiverList.push(item);
                         })
                    } else {
                        document.querySelector('#scrollReceiver') && (document.querySelector('#scrollReceiver').scrollTop = 0);
                        this.receiverList = res.data.data;
                    }

                    if (flag !== 'add' && flag !== 'search' && flag !== 'scroll') {
                        this.setReceiverCcInfo();
                    }
                });
                let fail = (res => {
                    this.isScroll = true;
                    if (flag === 'scroll') {
                        this.receiverParam.page_index--;
                    }
                })
                let appCode = this.plaformList.filter(item => this.plaformId === item.id)[0];

                this.$ajax({
                    url: "api/email/receiver",
                    method: "get",
                    params: {
                        app_code: is_empty(appCode) ? undefined : appCode.app_code,
                        keyword: this.receiver_keyword,
                        page_index: this.receiverParam.page_index,
                        page_size: this.receiverParam.page_size
                    },
                    func: {success: success, fail: fail}
                });
            },
            /**
             * 获取收件人列表
             */
             getReceiverList(flag) {
                document.removeEventListener('scroll', this.scrollFun, false);

                this.$nextTick(() => {
                    let domval = document.querySelector('#scrollReceiver');
                    domval && domval.addEventListener('scroll', this.scrollFun, false);
                })

                this.receiverList = [];
                this.getReceiverData(flag);
            },
            /**
             * 显示全部角色
             * @param {Array} arr 角色
             */
            showRoleName(arr) {
                let name = arr ? arr.join('</br>') : '';
                return name;
            },
            /**
             * 附件预览
             */
            previewScorce(obj) {
                
            },
            /**
             * 保存至草稿箱
             */
            submitDrafts(){
                this.loading.status = true;
                this.loading.txt = '邮件保存中';

                document.getElementById('forward_tinymce_content').innerHTML = this.sendForm.post_content;
                let spanList = document.getElementById('forward_tinymce_content').getElementsByClassName('click-span-preview');

                for(let i=0; i<spanList.length; i++){
                    if (i > this.itemDetail.file.length - 1) {
                        break;
                    }

                    let html = `
                        <a class="download-source" style="margin-left:15px;padding:1px 18px;color:#fff;font-size:12px;background:#8199C7;border-radius:4px;text-decoration:none;cursor:pointer;" data-link="${this.BASE_URL}/api/email/file?company=BL&device_name=TE-0600R&sign=b0BrQILFn4dP8u00r54qTIlpLXBdNMWi&actioncode=get_file&data[id]=${this.itemDetail.id}&data[fid]=${this.itemDetail.file[i].id}&data[token]=${this.itemDetail.file[i].token}">下载</a>
                    `;
                    spanList[i].insertAdjacentHTML('afterend', html);
                }

                let forWard_content = document.getElementById('forward_tinymce_content').innerHTML;
                let userList = [];
                let strMail = this.sendForm.externalRecipient.split(/[,，]/g); 

                this.recipientList.forEach(item => {
                    userList.push({
                        receiver: item.id,
                        receive_type: 1
                    })
                })

                this.ccList.forEach(item => {
                    userList.push({
                        receiver: item.id,
                        receive_type: 2
                    })
                })

                strMail.forEach(item => {
                    if (item != '') {
                        userList.push({
                            receiver: item,
                            receive_type: 3
                        })
                    }
                })

                let params = {
                    id: this.mailId ? this.mailId : 0,
                    subject: this.sendForm.subject,
                    type: 3,
                    obj_id: this.itemDetail.id,
                    config_id: this.sendForm.internetMail,
                    content: forWard_content,
                    submit_type: 0,
                    user: userList,
                    file: this.sendForm.attachment
                }
                    
                const success = (res => {
                    this.loading.status = false;
                    this.loading.txt = '加载数据...';
                    this.$message.success('邮件已保存至草稿箱');
                    this.mailId = !is_empty(res.data) ? parseInt(res.data) : 0;
                    document.getElementById('forward_tinymce_content').innerHTML = '';

                    let mailListId = JSON.parse(sessionStorage.getItem('mailListId'));

                    if (mailListId && mailListId.sent) {
                        sessionStorage.setItem('mailListId', JSON.stringify({...mailListId, ...{[this.boxName]: ''}}));
                        // sessionStorage.setItem('mailListId', JSON.stringify({...mailListId, ...{[this.boxName]: '', sent: parseInt(res.data)}}));
                    } else {
                        // sessionStorage.setItem('mailListId', JSON.stringify({[this.boxName]: '', sent: parseInt(res.data)}));
                    }
                })
                const fail = (res => {
                    this.loading.status = false;
                    this.loading.txt = '加载数据...';
                    this.$message.error(res.msg);
                    document.getElementById('forward_tinymce_content').innerHTML = '';
                })

                this.$ajax({
                    url: "api/email/single",
                    method: "post",
                    // headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    // params: params,
                    data: params,
                    func: {success: success, fail: fail}
                });
            },
            /**
             * 发送邮件
             */
            submitMail(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.isExternalRecipient) {
                            return false;
                        }

                        this.loading.status = true;
                        this.loading.txt = '邮件发送中';

                        document.getElementById('forward_tinymce_content').innerHTML = this.sendForm.post_content;
                        let spanList = document.getElementById('forward_tinymce_content').getElementsByClassName('click-span-preview');

                        for(let i=0; i<spanList.length; i++){
                            if (i > this.itemDetail.file.length - 1) {
                                break;
                            }

                            let html = `
                                <a class="download-source" style="margin-left:15px;padding:1px 18px;color:#fff;font-size:12px;background:#8199C7;border-radius:4px;text-decoration:none;cursor:pointer;" data-link="${this.BASE_URL}/api/email/file?company=BL&device_name=TE-0600R&sign=b0BrQILFn4dP8u00r54qTIlpLXBdNMWi&actioncode=get_file&data[id]=${this.itemDetail.id}&data[fid]=${this.itemDetail.file[i].id}&data[token]=${this.itemDetail.file[i].token}">下载</a>
                            `;
                            spanList[i].insertAdjacentHTML('afterend', html);
                        }

                        let forWard_content = document.getElementById('forward_tinymce_content').innerHTML;
                        let userList = [];
                        let strMail = this.sendForm.externalRecipient.split(/[,，]/g); 

                        this.recipientList.forEach(item => {
                            userList.push({
                                receiver: item.id,
                                receive_type: 1
                            })
                        })

                        this.ccList.forEach(item => {
                            userList.push({
                                receiver: item.id,
                                receive_type: 2
                            })
                        })

                        strMail.forEach(item => {
                            if (item != '') {
                                userList.push({
                                    receiver: item,
                                    receive_type: 3
                                })
                            }
                        })

                        let params = {
                            id: this.mailId ? this.mailId : 0,
                            subject: this.sendForm.subject,
                            type: 3,
                            obj_id: this.itemDetail.id,
                            config_id: this.sendForm.internetMail,
                            content: forWard_content,
                            submit_type: 1,
                            user: userList,
                            file: this.sendForm.attachment
                        }
                            
                        const success = (res => {
                            let _this = this;
                            this.loading.status = false;
                            this.loading.txt = '加载数据...';
                            this.$message.success('邮件发送成功');
                            let mailListId = JSON.parse(sessionStorage.getItem('mailListId'));

                            if (mailListId && mailListId.sent) {
                                sessionStorage.setItem('mailListId', JSON.stringify({...mailListId, ...{[this.boxName]: '', sent: parseInt(res.data)}}));
                            } else {
                                sessionStorage.setItem('mailListId', JSON.stringify({[this.boxName]: '', sent: parseInt(res.data)}));
                            }
                            
                            setTimeout(() => {
                                _this.$router.push(`/email/sent`);
                            }, 500);
                        })

                        const fail = (res => {
                            this.$message.error(res.msg);
                            this.loading.txt = '加载数据...';
                            this.loading.status = false;
                        })

                        this.$ajax({
                            url: "api/email/single",
                            method: "post",
                            // headers: {'Content-Type': 'application/json;charset=UTF-8'},
                            // params: params,
                            data: params,
                            func: {success: success, fail: fail}
                        });
                    } else {
                        return false;
                    }
                });
            },
            /**
             * 添加收件人
             * @param {String} val 有值为抄送，反之为收件人
             */
            addFormRecipient(val = '') {
                this.pop_up = true;

                if (val === 'cc') {
                    this.recipientCC = true;
                    this.people_lsit = deep_clone(this.ccList);
                } else {
                    this.people_lsit = deep_clone(this.recipientList);
                }

                if (this.plaformList.length > 0) {
                    this.plaformId = this.plaformList[0].id;
                    this.receiver_keyword = null;
                    this.receiverParam = {
                        page_index: 1,
                        page_size: 10
                    }
                    this.getReceiverList('add');
                }
            },
            /**
             * 添加收件人
             * @param {Number} inx 收件人列表下标
             */
            addRecipient(inx) {
                if (this.people_lsit.length >= 20) {
                    this.$message.error('最多只能选择20个用户');
                    return false;
                }

                // 发件人和抄送人不可以相同
                if (this.recipientCC) {
                    for (let i=0, len=this.recipientList.length; i<len; i++) {
                        if (this.recipientList[i].id === this.receiverList[inx].id) {
                            this.$message.error('发件人和抄送人不可以为同一个用户');
                            return false;
                        }
                    }
                } else {
                    for (let i=0, len=this.ccList.length; i<len; i++) {
                        if (this.ccList[i].id === this.receiverList[inx].id) {
                            this.$message.error('发件人和抄送人不可以为同一个用户');
                            return false;
                        }
                    }
                }

                // 不可重复添加相同人员
                if (!is_empty(this.people_lsit)) {
                    let len = this.people_lsit.length;

                    for (let i=0; i<len; i++) {
                        if (this.people_lsit[i].id === this.receiverList[inx].id) {
                            this.$message.error('不可重复添加相同人员');
                            return false;
                        }
                    }

                    this.people_lsit.push(deep_clone(this.receiverList[inx]));
                } else {
                    this.people_lsit.push(deep_clone(this.receiverList[inx]));
                }

            },
            /**
             * 添加全部收件人 
             */
            addAllRecipient() {
                if (this.people_lsit.length >= 20) {
                    this.$message.error('最多只能选择20个用户');
                    return false;
                }

                
                let _temp = [];

                this.receiverList.forEach(item1 => {
                    let falg = true;
                    let _item = [];

                    // 发送人和抄送人不可以相同
                    if (this.recipientCC) {
                        _item = deep_clone(this.recipientList.filter(item => item.id === item1.id));
                    } else {
                        _item = deep_clone(this.ccList.filter(item => item.id === item1.id));
                    }

                    // 不可重复添加相同人员
                    if (is_empty(_item)) {
                        this.people_lsit.forEach(item2 => {
                            if (item1.id === item2.id) {
                                falg = false;
                            }
                        })

                        falg && _temp.push(item1);
                    }
                })

                if (_temp.length === 0) {
                    this.$message.error('不可重复添加相同人员');
                    return false;
                }

                if (_temp.length + this.people_lsit.length > 20) {
                    this.$message.error('最多只能选择20个用户');
                    return false;
                }

                this.people_lsit = [...deep_clone(this.people_lsit), ...deep_clone(_temp)];
            },
            /**
             * 关闭选择收件人
             */
            closeRecipient() {
                this.pop_up = false;
                this.recipientCC = false;
                this.people_lsit = [];
                this.receiverList = [];
                this.receiver_keyword = null;
                this.receiverParam = {
                    page_index: 1,
                    page_size: 10
                }
            },
            /**
             * 删除选中的收件人
             * @param {Number} inx 选中人员下标
             */
            deleteRecipient(inx) {
                this.people_lsit.splice(inx, 1);
            },
            /**
             * 保存选择的收件人
             */
            newRecipient() {
                if (this.recipientCC) {
                    this.ccList = deep_clone(this.people_lsit);
                    this.recipientCC = false;
                } else {
                    this.recipientList = deep_clone(this.people_lsit);
                    this.sendForm.recipients = 'receiver';
                }

                this.closeRecipient();
            },
            /**
             * 清空收件人
             * @param {String} val 有值为抄送，反之为收件人
             */
            clearRecipient(val) {
                if (val === 'cc') {
                    this.ccList = [];
                } else {
                    this.recipientList = [];
                    this.sendForm.recipients = '';
                }

                this.$message.warning('无收件人');
            },
            /**
             * 删除一个收件人
             * @param {Number} inx 数组下标
             */
            clearReceiver(inx) {
                this.recipientList.splice(inx, 1);
            },
            /**
             * 删除一个抄送收件人
             * @param {Number} inx 数组下标
             */
            clearCC(inx) {
                this.ccList.splice(inx, 1);
            },
            /**
             * 验证外部收件人邮箱是否正确
             */
            blurExternalRecipient() {
                if (is_empty(this.sendForm.externalRecipient)) {
                    return false;
                }

                let temp = this.sendForm.externalRecipient.slice(-1);
                let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                let str = this.sendForm.externalRecipient.split(/[,，]/g);
                let htmlDom = document.querySelector('#external_recipient').classList;

                (temp === ',' || temp === '，') && str.pop();

                htmlDom.remove('external-recipient-success');
                htmlDom.remove('external-recipient-error');

                for (let i=0; i<str.length; i++) {
                    if (!reg.test(str[i])) {
                        this.$message.error(`第${i+1}个外部收件人邮箱格式不正确`);
                        htmlDom.add('external-recipient-error');
                        this.isExternalRecipient = true;
                        return;
                    }
                }

                this.isExternalRecipient = false;
                htmlDom.add('external-recipient-success');
            },
            /**
             * 移除上传的附件
             * @param {String} name 附件名称
             */
            delAttachment(name) {
                this.sendForm.attachment = this.sendForm.attachment.filter(function(item) {
                    return item.name !== name;
                })

                this.$refs.uploader.uploader.fileList = this.$refs.uploader.uploader.fileList.filter(function(item) {
                    return item.name !== name;
                })

                this.$refs.uploader.uploader.files = this.$refs.uploader.uploader.files.filter(function(item) {
                    return item.name !== name;
                })
            },
            /**
             * 过滤附件
             */
            fileAdded(file) {
                // 上传第一个是，数组为空
                if (this.sendForm.attachment.length > 2) {
                    this.$message.error('附件数量不能超过3个');
                    file.ignored = true;
                    return
                }

                if (file.size > 100*1024*1024) {
                    this.$message.error('附件大小为100M内');
                    file.ignored = true;
                    return false;
                }

                this.percentage = 0;
                this.progressing = true;
                this.disabledUplader = true;
            },
            /**
             * 所选择的附件添加到上传队列后触发
             */
            fileSubmit(files, fileList, event){},
            /**
             * 附件上传中
             */
            fileProgress() {
                this.percentage = parseInt(this.$refs.uploader.uploader.progress() * 100);
            },
            /**
             * 取消上传
             */
            fileCancel() {
                this.$refs.uploader.uploader.cancel();
                this.disabledUplader = false;
            },
            /**
             * 移除附件
             */
            fileRemoved(file) {
                this.progressing = false;
                this.disabledUplader = false;
            },
            /**
             * 上传附件成功
             */
            fileSuccess(rootFile, file, message, chunk) {
                this.progressing = false;
                this.disabledUplader = false;
                let mess = eval("(" + message + ")");
                mess = handleResponseData(mess);
                this.sendForm.attachment.push({
                    path: mess.data.file_path,
                    // type: mess.data.file_type,
                    name: mess.data.file_name,
                    postfix: mess.data.post_fix
                })
            },
            /**
             * 上传附件失败
             */
            fileFail(rootFile, file, message, chunk) {
                this.progressing = false;
                let mess = eval("(" + message + ")");

                if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
                    let callbcak = data => {
                        this.uploadRetryTimes--;
                        this.$refs.uploader.uploader.retry(file);
                    };
                    this.get_access_token(callbcak);
                } else {
                    this.disabledUplader = false;
                    this.$message.error(mess.msg);
                }
            },
            /**
             * 改变元素的样式
             */
            setStyle() {
                // footer
                this.home_header = document.querySelector('#front_email .headder').classList;
                this.home_main = document.querySelector('#front_email .main').classList;
                this.home_header.add('hidden-header');
                this.home_main.add('hidden-main');
            },
            /**
             * 返回上一个页面
             */
            linkTo() {
                this.$router.go(-1);
            },
            /**
             * 编辑器图片上传
             * @param {bolb} blobInfo 图片数据
             * @param {Function} success 成功时的回调函数
             * @param {Function} failure 失败时的回调函数
             */
            images_upload_handler(blobInfo, success, failure) {
                if (blobInfo.blob().type.indexOf("image/") === -1) {
                    failure("只允许上传图片格式的文件");
                } else if (blobInfo.blob().size > 10240000) {
                    failure("图片大小不能超过10M");
                } else {
                    let formData = new FormData();
                    formData.append("file", blobInfo.blob(), blobInfo.filename());
                    let succ = data => {
                        data.data=data.data.data;
                        success(this.BASE_URL + data.data.data.file_path);
                    };
                    let fail = data => {
                        data.data=data.data.data;
                        failure(data.data.data.message);
                    };

                    /****************** 不知为何要重新create *****************/
                    const instance = axios.create({
                        headers: {
                            Authorization: `Bearer ${this.$g.access_token}`,
                            DecisionPlatform: ` ${this.$g.access_token}`,
                            token: sessionStorage.getItem("token")
                        },
                        withCredentials: true
                    });

                    instance.post("api/resource/res_upload_permanent", formData)
                    .then(succ)
                    .catch(fail);
                }
            },
        },
        beforeDestroy() {
            // 清空本页面特有的样式
            this.home_header.remove('hidden-header');
            this.home_main.remove('hidden-main');
        }
    }
</script>

<style lang="scss">
    .hidden-header {
        display: none;
    }
    
    .hidden-main {
        height: calc(100vh - 59px);        
    }

    .forward-mail {
        position: relative;
        width: 100%;
        height: 100%;
        max-width: 1920px;
        overflow-y: auto;

        .no-more-data{
            display: block;
            margin-top: 20px;
            font-size: 14px;
            text-align: center;
            color: #A5A5A5;
        }

        #forward_tinymce_content {
            display: none;
        }

        .add-recipients-dialog {
            .el-dialog__body {
                padding: 20px 20px 0 20px;
            }

            .el-dialog-pop-up {
                display: flex;

                >div:first-child {
                    width: 270px;

                    .el-select {
                        width: 255px;
                    }

                    .org-people-box {
                        >div {
                            margin-top: 20px;
                            margin-right: 15px;
                            height: 290px;
                            border: 1px solid #DDDDDD;
                            overflow: hidden;
                            overflow-y: auto;

                            .org-people-item {
                                display: flex;
                                align-items: center;
                                padding: 10px 15px;
                                font-size: 12px;

                                span:first-child {
                                    width: 110px;
                                    // overflow: hidden;
                                    // text-overflow: ellipsis;
                                    // white-space: nowrap;
                                }

                                span:nth-child(2) {
                                    flex: 1;
                                }

                                span:last-child {
                                    font-size: 12px;
                                    width: 35px;
                                    color: #3D70AF;
                                    text-align: center;
                                    cursor: pointer;
                                }
                            }
                        }

                        >p {
                            width: 255px;
                            height: 38px;
                            line-height: 38px;
                            color: #348EFC;
                            font-size: 12px;
                            text-align: center;
                            border: 1px solid #DDDDDD;
                            border-top: none;
                            box-sizing: border-box;
                            cursor: pointer;
                        }
                    }
                }

                >div:last-child {
                    flex: 1;

                    .el-dialog-pop-keyword {
                        .el-input {
                            margin-right: 10px;
                            width: 242px;
                        }

                        button {
                            width: 82px;
                        }
                    }

                    .el-show-pepole {
                        >div {
                            margin-top: 20px;
                            height: 290px;
                            font-size: 12px;
                            border: 1px solid #DDDDDD;
                            overflow: hidden;
                            overflow-y: auto;

                            >div:first-child{
                                height: 36px;
                                line-height: 36px;
                            }

                            >div:not(:first-child) {
                                margin: 16px 0;
                            }

                            >div {
                                span {
                                    display: inline-block;
                                }

                                span:first-child {
                                    width: 30px;

                                    i {
                                        color: #D8D8D8;
                                        font-size: 16px;
                                    }
                                }

                                span:nth-child(2) {
                                    width: 170px;
                                }

                                span:nth-child(3) {
                                    width: 114px;
                                }

                                span:nth-child(4) {
                                    width: 94px;
                                }
                            }

                            >div:first-child {
                                background: #F5F5F5;
                            }

                            >div:not(:first-child) {
                                span:first-child {
                                    text-align: center;
                                    visibility: hidden;
                                    cursor: pointer;
                                }
                            }

                            >div:not(:first-child):hover {
                                span:first-child {
                                    visibility: visible;
                                }
                            }
                        }

                        >p {
                            width: 540px;
                            height: 38px;
                            line-height: 38px;
                            color: #348EFC;
                            font-size: 12px;
                            text-align: center;
                            border: 1px solid #DDDDDD;
                            border-top: none;
                            box-sizing: border-box;
                            cursor: pointer;
                        }
                    }
                }
            }
        }

        .forward-mail-title {
            position: fixed;
            padding-left: 60px;
            width: 100%;
            height: 80px;
            line-height: 80px;
            background: #fff;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            z-index: 10;

            >span {
                font-size: 18px;
                cursor: pointer;
            }

            >span:before {
                display: inline-block;
                content: "";
                position: absolute;
                top: 35px;
                left: 40px;
                width: 10px;
                height: 10px;
                border-width: 0 0 2px 2px;
                border-color: #888;
                border-style: solid;
                transform: rotateZ(45deg);
            }
        }

        .forward-mail-main {
            margin-top: 80px;
            padding: 30px 70px 90px 50px;
            height: calc(100% - 160px);
            background: #fff;
            box-sizing: border-box;
            overflow-y: auto;

            .demo-send-form {
                .disabled-uploader {
                    padding: 7px 8px;
                    color: #fff;
                    border-radius: 5px;
                    border: 1px solid #ccc;
                    background: #ccc;
                }

                .uploader-example {
                    .uploader-btn {
                        color: #fff;
                        border-radius: 4px;
                        border: 1px solid #8199C7;
                        background: #8199C7;
                    }

                    .uploader-progress {
                        display: none;
                    }

                    .uploader-progress-active {
                        display: inline-block;
                        margin-left: 30px;
                        font-size: 14px;

                        >div {
                            display: flex;
                            align-items: center;

                            >div {
                                width: 200px;
                            }

                            >span:nth-child(2) {
                                margin-left: 16px;
                                color: #348EFC;
                                cursor: pointer;
                            }
                        }
                    }
                }

                .tinymce-num {
                    position: absolute;
                    right: 0;
                    bottom: 1px;
                    display: block;
                    padding-right: 35px;
                    width: calc(100% - 1px);
                    text-align: right;
                    font-size: 12px;
                    color: #999;
                    background: #F9F9F9;
                    box-sizing: border-box;
                }
                
                .el-input input {
                    font-size: 15px;
                    color: #000;
                }

                .external-recipient-success {
                    color: #348EFC;
                    border: 1px solid #348EFC;
                }

                .external-recipient-error {
                    color: #F56C6C;
                    border: 1px solid #F56C6C;
                }

                #d1_ifr {
                    height: 426px !important;
                }

                .mail-content {
                    >div {
                        position: relative;
                    }

                    .content-tip-hidden {
                        display: none !important;
                    }

                    .mce-statusbar.mce-container.mce-panel.mce-stack-layout-item.mce-last {
                        display: none;
                    }
                }

                .mce-tinymce.mce-container.mce-panel[role=application] >div >div:first-child >div >div:first-child   {
                    display: none;
                }

                .mce-tinymce.mce-container.mce-panel[role=application] >div >div:first-child >div >div:last-child >div >div:first-child {
                    display: none;
                }
            }

            .send-form-recipients .el-form-item__content >div:first-child {
                display: inline-block;
                width: calc(100% - 182px);
            }

            .send-form-cc,
            .send-form-recipients .el-form-item__content >div:first-child {
                padding-left: 16px;
                padding-right: 16px;
                font-size: 12px;
                color: #999999;
                background: #F9F9F9;
                border: 1px solid #DDDDDD;
                border-radius: 4px;
                cursor: default;
                box-sizing: border-box;

                >span {
                    margin-right: 10px;
                    padding: 11px 0;
                    font-size: 14px;
                    cursor: pointer;

                    >i {
                        padding-left: 5px;
                        color: #ccc;
                    }
                }

                >span:last-child {
                    >span {
                        display: none;
                    }
                }

                >span:hover {
                    color: #000;
                    
                    i {
                        color: #C77676;
                    }
                }
            }

            .send-form-internet .el-form-item__content {
                .el-select {
                    width: 400px;
                }

                >span {
                    margin-left: 20px;
                    font-size: 12px;
                    color: #666666;
                }
            }

            .send-form-attachment-list {
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                >span {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-right: 30px;
                    font-size: 14px;
                    color: #586F8B;

                    span {
                        padding: 0 12px 0 8px;
                    }

                    i {
                        font-size: 18px;
                        color: #ccc;
                        cursor: pointer;
                    }

                    i:hover {
                        color: #C77676;
                    }
                }
            }

            .no-attachment {
                font-size: 12px;
                color: #999999;
            }

            .send-form-reciver {
                display: inline-block;

                span {
                    font-size: 12px;
                    color: #3D70AF;
                    cursor: pointer;
                }
                
                >span:first-child {
                    margin-left: 30px;
                }

                >span:last-child {
                    margin-left: 20px;
                }
            }

            .send-form-btn {
                span {
                    padding: 7px 10px;
                    font-size: 12px;
                    color: #fff;
                    border-radius: 4px;
                    cursor: pointer;
                }

                span:first-child {
                    background: #708DC4;
                }

                span:last-child {
                    margin-left: 10px;
                    background: #C77676;
                }
            }
        }

        .forward-mail-footer {
            position: fixed;
            bottom: 60px;
            width: 100%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background: #F9F9F9;

            >span:first-child {
                font-size: 14px;
                color: #999999;
                cursor: pointer;
            }

            >span:last-child {
                margin-left: 40px;
                padding: 6px 12px;
                font-size: 14px;
                color: #fff;
                background: #348EFC;
                border-radius: 2px;
                cursor: pointer;
            }

            span {
                vertical-align: middle;

                img {
                    margin-right: 8px;
                    vertical-align: middle;
                }
            }
        }

        .activeLive{
			opacity: 0;
			visibility: hidden;
		}

        // .el-dialog__wrapper{
		// 	.el-dialog__body {
        //         text-align: center;
		// 		padding: 0;
        //     }
		// }

        .masking_h {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            height: 40px;
            background: #348EFC;

            >span,
            >i {
                font-size: 16px;
                color: #fff;
            }

            >i{
                cursor: pointer;
            }
        }

        .video-preview {
            display: flex;
            justify-content: center;
            align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: .5s;
			background: rgba(0, 0, 0, 0.5);
			z-index: 3;

            .maskingBox {
                width: 70vw;
                height: 70vh;
                max-width: 1000px;
                max-height: 600px;
				background: #fff;
			}

            .masking_c {
                height: calc(100% - 40px);
                box-sizing: border-box;

                >div >div {
                    height: 600px;
                }
            }
        }

        .document-preview {
			display: flex;
            justify-content: center;
            align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: .5s;
			background: rgba(0, 0, 0, 0.5);
			z-index: 3;

			.maskingBox {
                width: 70vw;
                height: 70vh;
                max-width: 1200px;
                max-height: 900px;
				background: #fff;
			}

            .masking_c {
                height: calc(100% - 40px);
                box-sizing: border-box;

                >div {
                    height: 100%;

                    .pdf-view{
                        height: calc(100% - 70px);
                        overflow: hidden;
                        overflow-y: auto;

                        >span {
                            width: 100%;
                        }
                    }

                    .el-pagination {
                        padding: 20px 0;
                        text-align: center;
                        height: 70px;
                        box-sizing: border-box;
                    }
                }
            }
        }

		.picture-preview {
			display: flex;
            align-items: center;
            justify-content: center;
			margin: 0;

            .el-dialog {
                margin: 0;
                margin-top: 0 !important;
                width: 70vw;
                height: 70vh;
                max-width: 1200px;
                max-height: 900px;
                overflow: hidden;

                .el-dialog__body {
                    padding: 20px 0;
                    width: 100%;
                    height: calc(100% - 40px);
                    box-sizing: border-box;

                    div {
                        padding: 20px 40px 40px;
                        width: 100%;
                        height: 100%;
                        overflow-y: auto;
                        box-sizing: border-box;

                        img {
                            width: 100%;
                        }
                    }
                }
            }
        }

        .audio-preview {
            display: flex;
            align-items: center;
            justify-content: center;
			margin: 0;

            .el-dialog {
                margin: 0;
                margin-top: 0 !important;
                width: 500px;
                height: 300px;

                .el-dialog__body {
                    padding: 20px 0;
                    width: 100%;
                    height: calc(100% - 40px);
                    box-sizing: border-box;

                    div {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 0 40px;
                        width: 100%;
                        height: 100%;
                        box-sizing: border-box;
                    }
                }
            }
        }
    }
</style>